import React, { Component } from 'react';
import {SearchWrapper, SearchBox, BaseInput, SearchButton} from "./style";
import { debounce } from 'lodash'
import { connect } from 'react-redux';
import { actionCreators } from "./store"
import SearchFilter from "./components/SearchFilter";
import SearchContent from "./components/SearchContent";
import PageDivide from "./components/PageDivide";
import AnswerFromKg from "./components/AnswerFromKg";
import Autocomplete from "react-autocomplete"
class SearchHome extends Component {
  constructor(props) {
    super(props);
    this.showKey = debounce(this.showKey.bind(this),500)
  }
  showKey(e){
    this.props.HandleShowKeyWord(e.target.value)
  }
  render() {
    const {items,InputValue, HandleInputValue,
            HandleSearch,FirstFilter,SecondFilter,ThirdFilter,
         pageSize} = this.props;
    return (
      <SearchWrapper>
        <img src="https://search.gd.gov.cn/static/search/img/new_bg_banner.jpg"
             alt="" className={'headerImg'}/>
        <div className={'title'}>欢迎使用广州人社搜索平台</div>
        <SearchBox>
          <span className={'searchName'}>全站搜索: </span>
          <Autocomplete
            getItemValue={(item)=>{return item["key"]}}
            items={items.toJS()}
            wrapperStyle={{position: 'absolute',left:"30%",zIndex:10}}
            inputProps={{placeholder: "请输入关键字",style:{fontSize:20,width:400,height:50,paddingLeft:5}}}
            renderItem={(item, isHighlighted) =>
              <div style={{ background: isHighlighted ? 'lightgray' : 'white',zIndex:10,fontSize:20,marginTop:5,paddingLeft:10}}
                   key={item["key"]}>
                {item["key"]}
              </div>
            }
            value={InputValue}
            onChange={(e) => HandleInputValue(e.target.value)||this.showKey(e)}
            onSelect={(val) => HandleInputValue(val)}
          />
          <SearchButton onClick={()=>HandleSearch(InputValue,FirstFilter,SecondFilter,ThirdFilter,1,pageSize)}>搜索</SearchButton>
          {/*<span className={'highLevelSearch'}>*/}
          {/*              高级搜索*/}
          {/*              <i className="iconfont">&#xe626;</i>*/}
          {/*          </span>*/}
        </SearchBox>
        <SearchFilter/>
        <SearchContent/>
        <AnswerFromKg/>
        <PageDivide/>
      </SearchWrapper>
    )
  }
}
function mapDispatchToProps(dispatch){
  return {
    HandleShowKeyWord(keyword){
        dispatch(actionCreators.getTopKKeyword(keyword))
    },
    HandleInputValue(value){
      dispatch(actionCreators.setInputValue(value))
    },
    HandleSearch(value,First,Second,Third,pageNum,pageSize){
      dispatch(actionCreators.getSearchContent(First,Second,Third,value,pageNum,pageSize))
      dispatch(actionCreators.getAnswer(value))
    }
  }
}
function mapStateToProps(state){
  return {
    items: state.get('search').get('item'),
    InputValue: state.get('search').get('InputValue'),
    FirstFilter: state.get('search').get('FirstFilter'),
    SecondFilter: state.get('search').get('SecondFilter'),
    ThirdFilter: state.get('search').get('ThirdFilter'),
    pageSize : state.get('search').get('pageSize')
  }
}

export default connect(mapStateToProps,mapDispatchToProps)(SearchHome)
